<script type="text/javascript">
$(document).ready(function () {
    var dataSource = {
            datatype: "json",
            cache: false,
            datafields: [
                { name: 'ma_nhom', type: 'int' },
                { name: 'ten_nhom', type: 'string' },
                { name: 'ngay_thanh_lap', type: 'string' },
                { name: 'thong_tin', type: 'string' },
                { name: 'luot_like', type: 'int' }
            ],
            id: 'ma_nhom',
            url: 'libs/DSNhomNhac.php',
            addrow: function (rowid, rowdata, position, commit) {
                // synchronize with the server - send insert command
                var data = "action=insert&" + $.param(rowdata);
                console.log(data);
                $.ajax({
                    //dataType: 'json',
                    url: 'controllers/NhomNhac_Controller.php',
                    data: data,
                    type: "POST",
                    cache: false,
                    success: function (data, status, xhr) {
                        // insert command is executed.
                        commit(true);
                        $('#nhomnhac_danhsach').jqxGrid('updatebounddata');
                        //dat gia tri cho the input id=nghesi_id, de no submit cung voi form
                        $("#nhomnhac_id").val(data);
                        console.log("add commited");
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        commit(false);
                        console.log(jqXHR.responseText);
                    }
                });
            },
            updaterow: function (rowid, rowdata, commit) {
               // synchronize with the server - send update command
               var data = "action=edit&" + $.param(rowdata);
               $.ajax({
                   //dataType: 'json',
                   url: 'controllers/NhomNhac_Controller.php',
                   cache: false,
                   data: data,
                   type: "POST",
                   success: function (data, status, xhr) {
                       // update command is executed.
                       commit(true);
                       $('#nhomnhac_danhsach').jqxGrid('updatebounddata');
                       console.log("update commited");
                   },
                   error: function (jqXHR, textStatus, errorThrown) {
                       console.log(textStatus + "  " + errorThrown + "   " + jqXHR.responseText);
                       commit(false);
                   }
               });
           },
           deleterow: function (manhomnhac, commit) {
                // synchronize with the server - send delete command
                var data = "action=delete&" + $.param({ manhomnhac: manhomnhac });
                console.log(data);
                $.ajax({
                    //dataType: 'json',
                    url: 'controllers/NhomNhac_Controller.php',
                    cache: false,
                    type: "POST",
                    data: data,
                    success: function (data, status, xhr) {
                        // delete command is executed.
                        commit(true);
                        $('#nhomnhac_danhsach').jqxGrid('updatebounddata');
                        console.log("delete commited");
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        commit(false);
                    }
                });
            }
        };
    var dataAdapter = new $.jqx.dataAdapter(dataSource, {
        formatData: function (data) {
            $.extend(data, {
                login: $("#islogin").val()
            });
            return data;
        }
    });
    var tennhom_renderer = function(row, columnfield, value){
        var data = $('#nhomnhac_danhsach').jqxGrid('getrowdata', row);
        var id = data["ma_nhom"];
        var fileName= "resources/img/nhom_nhac/" + id + ".png";
        var res = '<img src="' + fileName + '" width="40px" height="40px" style="vertical-align: middle;" onerror="changeSrc(this);"/>  ' + 
                '<strong>' + value + '</strong>';      
        return res;
    };
    $("#nhomnhac_danhsach").jqxGrid({
            theme:theme, 
            width: 320,
            height: 585,
	    source: dataAdapter,
	    sortable: true,
            pageable: true,
            rowsheight: 40,
	    columns: [
	    	{ text: 'Mã', datafield: 'ma_nhom', width: 50, hidden: false },
	    	{ text: 'Tên nhóm', datafield: 'ten_nhom', width: 150, hidden: false,  cellsrenderer: tennhom_renderer},
	    	{ text: 'Ngày thành lập', datafield: 'ngay_thanh_lap',width: 120, hidden: false },
	    	{ text: 'Thông tin', datafield: 'thong_tin', width: 100, hidden: true },
	    	{ text: 'Lượt like', datafield: 'luot_like', width: 100, hidden: true }
		]
	});
	$('#nhomnhac_danhsach').on('rowclick', function (event){
            var args = event.args;
	    var row = args.rowindex;
	    console.log("click at" + row);
	    var data = $('#nhomnhac_danhsach').jqxGrid('getrowdata', row);
            $("#tennhom").val(data["ten_nhom"]);
            $("#nhomnhac_luotlike").text("Like: " + data["luot_like"]);
            //lay ngay sinh theo dung dinh dang
            //yyyy/mm/dd
            var ngaythanhlap = data["ngay_thanh_lap"].toString();
            var ngay = ngaythanhlap.substr(8, 2);
            var thang = ngaythanhlap.substr(5, 2);
            var nam = ngaythanhlap.substr(0, 4);
            //lay ra xong roi gan vao #ngaysinh
            $("#ngaythanhlap").jqxDateTimeInput({ value: new Date(nam, parseInt(thang) - 1, ngay) });
            //phai tru 1 vi thang bat dau bang 0
	    $("#thongtin").val(data["thong_tin"]);
            $('#nhomnhac_anhdaidien').attr('src', "resources/img/nhom_nhac/" + data["ma_nhom"] + ".png");
            $("#nhomnhac_id").val(data["ma_nhom"]);
            $('#nhomnhac_thanhvien').jqxGrid('updatebounddata');
	});
});
</script>
<div id="nhomnhac_danhsach" style="float: left"></div>